<template>
  <a-modal
    v-model:visible="visible"
    :title="apartData ? '编辑部门' : '新增部门'"
    @ok="handleOk"
    @cancel="() => emit('update:visible')"
    cancelText="取消"
    okText="确定"
  >
    <a-form
      ref="apartFormRef"
      :model="formState"
      name="basic"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
      autocomplete="off"
      @finish="onFinish"
    >
      <a-form-item
        label="上级部门"
        name="ids"
        :rules="[{ required: true, message: '请选择' }]"
      >
        <a-cascader
          v-model:value="formState.ids"
          :options="options"
          placeholder="请选择"
          expandTrigger="hover"
          :changeOnSelect="true"
        >
          <template #suffixIcon><smile-outlined /></template>
        </a-cascader>
      </a-form-item>
      <a-form-item
        label="部门名称"
        name="title"
        :rules="[{ required: true, message: '请输入部门名称' }]"
      >
        <a-input v-model:value="formState.title" placeholder="请输入部门名称" />
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-switch
          :checked="formState.status == 1"
          checked-children="启用"
          un-checked-children="禁用"
          @change="onChangeDeptStatus"
        />
      </a-form-item>
      <a-form-item label="备注" name="message">
        <a-textarea
          v-model:value="formState.message"
          placeholder="请输入备注"
          :rows="4"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup name="FormModal">
import { IApartment } from "@/type/System";
import { CascaderProps, FormInstance, message } from "ant-design-vue";
import { SmileOutlined } from "@ant-design/icons-vue";
import { ref, watch } from "vue";
import moment from "moment";
import cloneDeep from "lodash/cloneDeep";

let emit = defineEmits(["update:visible"]);
let props = defineProps<{
  visible: Boolean;
  apartList: IApartment[];
  apartData: IApartment | any;
}>();
const apartFormRef = ref<FormInstance>();
const formState = ref<IApartment & { ids: string[] }>({
  key: "",
  title: "",
  status: 1, // 1 启用 0 禁用
  message: "",
  createTime: "",
  ids: [],
});

// 级联选择上级部门
const options = ref<CascaderProps["options"]>([]);

const setOptons = (
  params: IApartment[],
  myOptions: CascaderProps["options"]
) => {
  params.forEach((item) => {
    const childOption = {
      label: item.title,
      value: item.key,
      children: [],
    };
    myOptions!.push(childOption);
    if (item.children) {
      setOptons(item.children, childOption.children);
    }
  });
};
const onFinish = () => {};
const onChangeDeptStatus = (value: Boolean) => {
  formState.value.status = value ? 1 : 0;
};

watch(
  () => props.apartData,
  (newVal) => {
    if (typeof newVal !== "undefined") {
      formState.value = cloneDeep(newVal);

      let ids: string[] = [];
      let keys = formState.value.key.split(".");
      keys.forEach((_, index) => {
        let temp = keys
          .slice(0, index + 1)
          .toString()
          .replaceAll(",", ".");
        ids.push(temp);
      });

      formState.value.ids = ids;
      return;
    }
    formState.value = {
      key: "",
      title: "",
      status: 1, // 1 启用 0 禁用
      message: "",
      createTime: "",
      ids: [],
    };
  }
);
watch(
  () => props.apartList,
  (newVal) => {
    let myOPtions: CascaderProps["options"] = [];
    setOptons(newVal, options.value);
  }
);
const handleOk = () => {
  apartFormRef.value?.validate().then(() => {
    formState.value.createTime =
      formState.value.createTime || moment().format("YYYY-MM-DD hh:mm:ss");
    message.success({
      content: JSON.stringify(formState.value),
      duration: 1,
    });
    emit("update:visible");
  });
};
</script>
<style lang="less" rel="stylesheet/less" scoped></style>
